<template>
    <div class = "addbaseslideshowredact">
       <el-container>
        <el-container>
        <el-main>
            <el-breadcrumb separator="/" style="padding-bottom:15px;">
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" :to="{ path: 'Addbase' }">基地管理</el-breadcrumb-item>
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" @click.native = "goBack">基地项目</el-breadcrumb-item>
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" @click.native = "goBack">轮播图列表</el-breadcrumb-item>
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer">轮播图</el-breadcrumb-item>
            </el-breadcrumb>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="图片名称" prop="title">
                <el-input  v-model="ruleForm.title" autocomplete="off" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item  label="图片内容" prop="content">
                <el-input
                :rows="3"
                placeholder="请输入内容"
                v-model="ruleForm.content">
                </el-input>
            </el-form-item>
            <el-form-item  label="项目权重" prop="weight">
                <el-input
                type="number"
                :rows="3"
                placeholder="请输入内容"
                v-model="ruleForm.weight">
                </el-input>
            </el-form-item>
            <el-form-item  label="图片链接" prop = "link">
                <el-input
                :rows="3"
                placeholder="请输入链接"
                v-model="ruleForm.link">
                </el-input>
            </el-form-item>
            <el-form-item label="基地图片">
               <el-upload
              class="upload-demo"
              :action="this.IP"
              :data="{type:'image'}"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-success="handleAvatarSuccess"
              :limit="1"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              </el-upload> 
            </el-form-item>
            <el-form-item>
            <el-button v-if = "Boole===0" type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button v-if = "Boole===1" type="primary" @click="submitFormone('ruleForm')">修改</el-button>
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            </el-form-item>
        </el-form>
        </el-main>
        </el-container>
       </el-container>
    </div>
</template>
<script>
export default {
    data(){
         var validatetitle = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入名称'));
        } else {
          callback();
        }
      };
      var validatecontent = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入内容'));
        } else {
          callback();
        }
      };
      var validateweight = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入权重'));
        } else {
          callback();
        }
      };
      var validatelink = (rule, value, callback) => {
        var pattrn = /^(http:\/\/|^https:\/\/|^\/\/)((\w|=|\?|\.|\/|&|-)+)/g
        if (value === '') {
           callback(new Error('请输入链接'));
        } else if(!pattrn.test(value)){
           callback(new Error('请输入正确的链接'));
        } else {
           callback(); 
        }
      };
        return{
            loading:false,
            fileList:[],
            Boole:'',
            formone:{},
            ruleForm: {
            link:'',
            title: '',
            content: '',
            imgId:[],
            weight:''
            },
            baseId:'',
            id:'',
            rules:{
            title: [
                { validator: validatetitle, trigger: 'blur' }
            ],
            content: [
                { validator: validatecontent, trigger: 'blur' }
            ],
            weight:[
                { validator: validateweight, trigger: 'blur' }
            ],
            link:[
                { validator: validatelink, trigger: 'blur' }
            ],
            },
        }
    },
    created(){
        this.List()
    },
    methods:{
        List(){
            this.formone = this.$route.query.item
            this.id = this.$route.query.id
            this.baseId = this.$route.query.baseId
            console.log(this.formone)
            if(this.formone){
                this.ruleForm = this.formone
                this.fileList = [{url:this.formone.imgUrl}]
                this.Boole = 1
                console.log(this.Boole)
            } else {
                this.Boole = 0
                console.log(this.Boole)
            }
        },
        goBack(){
            this.$router.push(`Addbaseslideshow?baseId=${this.baseId}`)
        },
        //新增
        submitForm(formName){
           this.$refs[formName].validate((valid) => {
               if(this.ruleForm.imgId){
                if (valid) {
                this.loading = true
                this.$api.Basetoaddordelete.slideshowadd(this.ruleForm,this.baseId).then(res => {
                    if(res.code === 200){
                        this.open1('成功','添加成功','success')
                        this.goBack()
                    } else if(res.msg === 'imgId不能为null'){
                        this.open1('失败','请添加图片','warning')
                    }
                this.loading = false
                }).catch(err => {
                    console.log(err)
                })
            } else {
                console.log('error submit!!');
                return false
            }
               } else {
                this.open1('失败','请添加图片','warning')
            }
        });
        },
        //修改
        submitFormone(formName){
           this.$refs[formName].validate((valid) => {
               if(this.ruleForm.imgId){
                if (valid) {
                this.loading = true
                this.$api.Basetoaddordelete.Baseslideshowmodification(this.ruleForm,this.id).then(res => {
                    if(res.code === 200){
                        this.open1('成功','修改成功','success')
                        this.goBack()
                    } else if(res.msg === 'imgId不能为null'){
                        this.open1('失败','请添加图片','warning')
                    }
                this.loading = false
                }).catch(err => {
                    console.log(err)
                })
            } else {
                console.log('error submit!!');
                return false
            }
            } else {
                this.open1('失败','请添加图片','warning')
            }
        });
        },
        handleAvatarSuccess(response, file, fileList){
         this.ruleForm.imgId = file.response.data.id
        },
        handleRemove(file, fileList) {
          this.ruleForm.imgId = ''
        },
        handlePreview(file) {
          console.log(file);
        },
        open1(title,content,type) {
        this.$notify({
          title: title,
          message: content,
          type: type
        });
        },
    }
}
</script>
<style scoped>

</style>

